<template>
  <div>
    <!-- 弹出框 -->
    <el-dialog
      title="附件详情"
      :visible.sync="dialogVisable"
      width="810px"
      top="50vh"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      custom-class="samples-dialog"
      :append-to-body="true"
      :before-close="handleClose"
    >
      <!-- esc按钮和点击遮罩不会关闭弹窗，需要设置配置项 -->
      <el-form
        label-width="80px"
        class="samples-dialog-form"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="模板名称：" prop="name">
              {{ detailData[0].name }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="适用分类：" prop="classifyName">
              {{ detailData[0].classifyName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="适用类型：" prop="typeArr">
              {{ detailData[0].typeName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="附件名称：" prop="a7">
              <span v-for="(item, index) in detailData[1].contractAttachmentTypeItemList" :key="index">
                <span style="padding-right:10px;">{{ item.name }}</span>
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import * as contractCorrelationApi from '@/api/contractManage/contractCorrelation'
export default {
  props: {

    detailDialogShow: {
      type: Boolean,
      default: false
    },
    detailDialogId: {
      type: Number,
      required: true
    }

  },
  data() {
    return {
      dialogVisable: false,
      detailData: [[],[]]
    }
  },
  watch: {
    detailDialogShow: {
      handler: function(val, oldval) {
        console.log('父组件传过来的值', val)
        if (val === true) {
          this.dialogVisable = this.detailDialogShow
          this.getDetal()
        }
      }
    }
  },
  methods: {
    //   关闭表单
    handleClose() {
      this.dialogVisable = false
      //   this.detailData = {}
      this.$emit('dialogVisableplay', this.dialogVisable)
      this.detailData = [{ name: '', classifyName: '', typeName: '' }, { contractAttachmentTypeItemList: { name: [] }}]
    },
    getDetal() {
      this.detailData = [[],[]]
      console.log('我进入了getDetal')
      contractCorrelationApi.contractAttachmentTypeDetail(this.detailDialogId).then(res => {
        if (res.code === 1) {
          this.detailData = res.data
        } else {
          this.handleClose()
          this.$notify.error({
            title: '错误',
            message: res.msg,
            duration: '3000'
          })
        }
      }).catch(errMsg => {
        this.handleClose()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
